<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true">
			<view slot="left" class="navbar-left">
				<navigator url="/pageNew/pages/tax/index" class="back-navigator">
					<view class="back-content">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="navbar-title">查看税务申报</text>
					</view>
				</navigator>
			</view>
		</u-navbar>

		<!-- 主内容区 -->
		<view class="content-container">
			<!-- 税务申报申报详情卡片 -->
			<view class="detail-card">
				<view class="detail-header">
					<text class="detail-title">{{ getTaxTypeText(taxReturn.type) }}</text>
					<text class="detail-status" :class="statusClass">
						{{ getStatusText(taxReturn.status) }}
					</text>
				</view>

				<view class="detail-body">
					<view class="detail-row">
						<text class="detail-label">申报编号:</text>
						<text class="detail-value">{{ taxReturn.returnNo }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">申报期间:</text>
						<text class="detail-value">{{ taxReturn.period }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">申报金额:</text>
						<text class="detail-value font-medium">¥{{ formatCurrency(taxReturn.amount) }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">截止日期:</text>
						<text class="detail-value">{{ taxReturn.dueDate }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">创建日期:</text>
						<text class="detail-value">{{ formatDate(taxReturn.createdAt) }}</text>
					</view>
					<view class="detail-row" v-if="taxReturn.submitDate">
						<text class="detail-label">申报日期:</text>
						<text class="detail-value">{{ formatDate(taxReturn.submitDate) }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">备注:</text>
						<text class="detail-value">{{ taxReturn.remarks || '无' }}</text>
					</view>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="action-group">
				<view class="action-btn"
					:class="(taxReturn.status === 'pending' || taxReturn.status === 'failed') ? 'btn-submit' : 'btn-export'"
					@click="handleTaxAction"
					v-if="taxReturn.status === 'pending' || taxReturn.status === 'failed' || taxReturn.status === 'completed'">
					<u-icon
						:name="taxReturn.status === 'pending' || taxReturn.status === 'failed' ? 'play-right' : 'download'"
						size="16" class="action-icon"></u-icon>
					<text class="action-text">
						{{ taxReturn.status === 'pending' ? '立即申报' : taxReturn.status === 'failed' ? '重新申报' : '导出凭证' }}
					</text>
				</view>
			</view>

			<!-- 底部操作栏 -->
			<view class="bottom-action-bar">
				<view class="action-btn btn-edit" @click="editTaxReturn">
					<u-icon name="edit-pen" size="16" class="action-icon"></u-icon>
					<text class="action-text">编辑</text>
				</view>
				<view class="action-btn btn-delete" @click="deleteTaxReturn">
					<u-icon name="trash" size="16" class="action-icon"></u-icon>
					<text class="action-text">删除</text>
				</view>
			</view>
		</view>

		<!-- 删除确认弹窗 -->
		<view class="modal-container-center" :class="showDeleteModal ? 'modal-show' : 'modal-hide'">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">确认删除</text>
				</view>
				<view class="modal-body">
					<text class="modal-text">您确定要删除这条税务申报记录吗？删除后将无法恢复。</text>
				</view>
				<view class="modal-footer">
					<view class="btn-cancel" @click="toggleDeleteModal">取消</view>
					<view class="btn-danger" @click="confirmDelete">删除</view>
				</view>
			</view>
		</view>

		<!-- 操作确认弹窗 -->
		<view class="modal-container-center" :class="showActionModal ? 'modal-show' : 'modal-hide'">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">{{ taxReturn.status === 'pending' ? '确认申报' : '确认重新申报' }}</text>
				</view>
				<view class="modal-body">
					<text class="modal-text">您确定要提交这张申报表吗？提交后将无法修改。</text>
				</view>
				<view class="modal-footer">
					<view class="btn-cancel" @click="toggleActionModal">取消</view>
					<view class="btn-submit" @click="confirmAction">确认申报</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 税务申报数据
				taxReturn: {},

				// 删除确认弹窗
				showDeleteModal: false,

				// 操作确认弹窗
				showActionModal: false
			};
		},
		computed: {
			statusClass() {
				// 直接复用原有方法逻辑，根据 taxReturn.status 返回对应类名
				switch (this.taxReturn.status) {
					case 'pending':
						return 'status-pending';
					case 'completed':
						return 'status-completed';
					case 'failed':
						return 'status-failed';
					case 'archived':
						return 'status-archived';
					default:
						return 'status-default';
				}
			}
		},
		onLoad(options) {
			console.log('查看税务申报页面加载完成', options);

			// 获取税务申报ID
			const taxId = options.id;

			// 获取本地存储的税务申报数据
			let taxReturns = uni.getStorageSync('taxReturns') || [];

			// 查找对应的税务申报
			const foundTaxReturn = taxReturns.find(tax => tax.id === taxId);

			if (foundTaxReturn) {
				this.taxReturn = foundTaxReturn;
			} else {
				// 如果本地存储中没有找到，使用默认数据
				this.taxReturn = {
					id: '1',
					type: 'vat',
					returnNo: 'TZ2024100001',
					period: '2024-10',
					dueDate: '2024-11-15',
					amount: 3500.00,
					status: 'pending',
					createdAt: '2024-10-31T10:00:00',
					submitDate: '',
					remarks: '10月份增值税申报'
				};
			}
		},
		methods: {
			// 获取税种文本
			getTaxTypeText(type) {
				const typeMap = {
					'vat': '增值税',
					'income': '企业所得税',
					'personal': '个人所得税',
					'stamp': '印花税',
					'other': '其他税种'
				};

				return typeMap[type] || type;
			},

			// 获取申报状态文本
			getStatusText(status) {
				const statusMap = {
					'pending': '待申报',
					'completed': '已申报',
					'failed': '已失败',
					'archived': '已归档'
				};

				return statusMap[status] || status;
			},

			// 获取申报状态样式
			getStatusClass(status) {
				switch (status) {
					case 'pending':
						return 'status-pending';
					case 'completed':
						return 'status-completed';
					case 'failed':
						return 'status-failed';
					case 'archived':
						return 'status-archived';
					default:
						return 'status-default';
				}
			},

			// 格式化货币
			formatCurrency(amount) {
				return parseFloat(amount).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
			},

			// 格式化日期
			formatDate(dateString) {
				if (!dateString) return '';

				const date = new Date(dateString);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');

				return `${year}-${month}-${day}`;
			},

			// 编辑税务申报
			editTaxReturn() {
				uni.navigateTo({
					url: `/pageNew/pages/tax/edit?id=${this.taxReturn.id}`
				});
			},

			// 删除税务申报
			deleteTaxReturn() {
				this.showDeleteModal = true;
			},

			// 关闭删除确认弹窗
			toggleDeleteModal() {
				this.showDeleteModal = false;
			},

			// 确认删除
			confirmDelete() {
				// 获取本地存储的税务申报数据
				let taxReturns = uni.getStorageSync('taxReturns') || [];

				// 过滤掉要删除的税务申报
				taxReturns = taxReturns.filter(tax => tax.id !== this.taxReturn.id);

				// 保存到本地存储
				uni.setStorageSync('taxReturns', taxReturns);

				// 关闭弹窗
				this.showDeleteModal = false;

				// 显示成功提示
				uni.showToast({
					title: '税务申报删除成功',
					icon: 'success'
				});

				// 返回税务申报列表页面
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1500);
			},

			// 处理税务操作
			handleTaxAction() {
				if (this.taxReturn.status === 'completed') {
					// 导出凭证
					this.exportReceipt();
				} else {
					// 申报或重新申报
					this.showActionModal = true;
				}
			},

			// 关闭操作确认弹窗
			toggleActionModal() {
				this.showActionModal = false;
			},

			// 确认操作
			confirmAction() {
				// 获取本地存储的税务申报数据
				let taxReturns = uni.getStorageSync('taxReturns') || [];

				// 更新税务申报状态
				const index = taxReturns.findIndex(tax => tax.id === this.taxReturn.id);
				if (index !== -1) {
					taxReturns[index].status = 'completed';
					taxReturns[index].submitDate = new Date().toISOString();

					// 保存到本地存储
					uni.setStorageSync('taxReturns', taxReturns);

					// 更新税务申报数据
					this.taxReturn.status = 'completed';
					this.taxReturn.submitDate = new Date().toISOString();
				}

				// 关闭弹窗
				this.showActionModal = false;

				// 显示成功提示
				uni.showToast({
					title: '税务申报成功',
					icon: 'success'
				});
			},

			// 导出凭证
			exportReceipt() {
				uni.showToast({
					title: '正在导出凭证...',
					icon: 'loading',
					duration: 2000
				});

				setTimeout(() => {
					uni.showToast({
						title: '凭证导出成功',
						icon: 'success'
					});
				}, 2000);
			}
		}
	};
</script>

<style scoped>
	/* 全局容器 */
	.page-container {
		min-height: 100vh;
		background-color: #f9fafb;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}

	/* 导航栏样式 */
	.navbar-left {
		display: flex;
		align-items: center;
	}

	.navbar-right {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.back-navigator {
		display: flex;
		align-items: center;
	}

	.back-content {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 16px;
		font-weight: 600;
		color: #1e88e5;
		margin-left: 8px;
	}

	.btn-edit {
		background: transparent;
		border: none;
		font-size: 14px;
		color: #1e88e5;
	}

	.btn-delete {
		background: transparent;
		border: none;
		font-size: 14px;
		color: #F44336;
	}

	/* 主内容区样式 */
	.content-container {
		margin: 0 auto;
		padding: 16px;
	}

	/* 详情卡片样式 */
	.detail-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 16px;
		margin-bottom: 16px;
	}

	/* 详情头部样式 */
	.detail-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.detail-title {
		font-size: 16px;
		font-weight: 500;
		color: #1f2937;
	}

	.detail-status {
		padding: 2px 8px;
		border-radius: 999px;
		font-size: 12px;
	}

	.status-pending {
		background-color: rgba(255, 152, 0, 0.1);
		color: #FF9800;
	}

	.status-completed {
		background-color: rgba(76, 175, 80, 0.1);
		color: #4CAF50;
	}

	.status-failed {
		background-color: rgba(244, 67, 54, 0.1);
		color: #F44336;
	}

	.status-archived {
		background-color: rgba(30, 136, 229, 0.1);
		color: #1e88e5;
	}

	.status-default {
		background-color: #f3f4f6;
		color: #6b7280;
	}

	/* 详情内容样式 */
	.detail-body {}

	.detail-row {
		display: flex;
		align-items: flex-start;
		margin-bottom: 12px;
	}

	.detail-label {
		width: 80px;
		font-size: 14px;
		color: #6b7280;
	}

	.detail-value {
		flex: 1;
		font-size: 14px;
		color: #1f2937;
	}

	/* 操作按钮组样式 */
	.action-group {
		display: flex;
		justify-content: center;
		margin-bottom: 16px;
	}

	.action-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		padding: 12px 24px;
		font-size: 14px;
	}

	.btn-submit {
		background-color: #1e88e5;
		border-radius: 6px;
		padding: 12px 24px;
		color: #ffffff;
	}

	.btn-export {
		background-color: #4CAF50;
		color: #ffffff;
	}

	.action-icon {
		margin-right: 8px;
	}

	.action-text {}

	/* 居中弹窗容器 */
	.modal-container-center {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		display: none;
		/* 默认隐藏 */
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.5);
	}

	/* 弹窗显示状态 */
	.modal-container-center.modal-show {
		display: flex;
	}

	/* 弹窗隐藏状态 */
	.modal-container-center.modal-hide {
		display: none;
	}

	/* 弹窗样式 */
	.modal-content {
		background-color: #ffffff;
		border-radius: 8px;
		width: 100%;
		max-width: 320px;
		margin: 0 16px;
	}

	.modal-header {
		padding: 16px;
		border-bottom: 1px solid #e5e7eb;
	}

	.modal-title {
		font-size: 16px;
		font-weight: 500;
		color: #1f2937;
	}

	.modal-body {
		padding: 16px;
	}

	.modal-text {
		font-size: 14px;
		color: #374151;
		line-height: 1.5;
	}

	.modal-footer {
		padding: 12px 16px;
		border-top: 1px solid #e5e7eb;
		display: flex;
		justify-content: space-between;
		gap: 8px;
	}

	/* 按钮样式 */
	.btn-cancel {
		background-color: #e5e7eb;
		color: #374151;
		border-radius: 6px;
		padding: 8px 16px;
		font-size: 14px;
		border: none;
	}

	.btn-danger {
		background-color: #F44336;
		color: #ffffff;
		border-radius: 6px;
		padding: 8px 16px;
		font-size: 14px;
		border: none;
	}

	/* 底部操作栏样式 */
	.bottom-action-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 0;
	}

	.bottom-action-bar .action-btn {
		flex: 1;
		margin: 0 8px;
	}

	.btn-edit {
		background-color: #1e88e5;
		color: #ffffff;
	}

	.btn-delete {
		background-color: #F44336;
		color: #ffffff;
	}

	/* 底部操作栏样式 */
	.bottom-action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 1px solid #e5e7eb;
		padding: 12px 16px;
	}

	.bottom-action-bar .btn-save {
		width: 100%;
		background-color: #1e88e5;
		color: #ffffff;
		border-radius: 6px;
		padding: 12px;
		font-size: 14px;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>